<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">测评项管理（ 评价 ）</div>
          <div class="tablelink">

            <el-link icon="el-icon-plus" v-if="permissions.ceping_cepingxmxxb_add" type="primary" @click="addOrUpdateHandle($event)" :underline="false">新增测评项</el-link>
          </div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="测评项统称">
            <el-input v-model="dataForm.xmName" style="width:300px" placeholder="请输入测评项统称"></el-input>
          </el-form-item>
          <el-form-item label="项目状态">
            <el-select :clearable="true" v-model="dataForm.xmZt" placeholder="请选择状态" style="margin-left:10px" class="xiaLa">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList(1)">检索</el-button>
          </el-form-item>
        </el-form>

        <div class="avue-crud" style="height:60vh;">
          <el-collapse v-model="activeName" @change="selinformation(index)" accordion v-for="(record, index) in dataList" :key="index">
            <el-collapse-item :name=index>
              <template slot="title">
                <div class="collapseBox">
                  <div class="flex alignItemsCenter"><span class="numTip">{{selxh(index)}}</span>
                    <span class="titleBox">{{record.xmName}} ({{record.zbQz}}%)</span>
                  </div>
                  <div class="collapseSummary flex justifyContentSpaceBetween">
                    <div>
                      <div class="mb5">创建时间：{{$moment(record.createTime).format("YYYY-MM-DD")}}</div>
                      <div class="mb5">创建部门：{{record.createDeptName}}</div>
                      <div class="mb5">项目状态：<span :class="Zt(record.xmZt)">{{record.xmZt==1?"显示":"隐藏"}}</span></div>
                    </div>

                    <div>
                      <el-button v-if="permissions.ceping_cepingxmxxb_edit && record.createDeptId === userInfo.deptId" type="primary" plain @click="updatexmZt($event,record.id,record.xmZt==1?0:1)">{{record.xmZt==1?"隐藏":"显示"}}</el-button>
                      <el-button v-if="permissions.ceping_cepingxmxxb_add" type="primary" plain @click="addOrmultiplexing($event,record.id)">复用</el-button>
                      <el-button v-if="permissions.ceping_cepingxmxxb_add && record.createDeptId === userInfo.deptId" type="primary" plain @click="addOrUpdateHandlemxb($event,record)">新增一级指标</el-button>
                      <el-button v-if="permissions.ceping_cepingxmxxb_edit && record.createDeptId === userInfo.deptId" type="primary" plain @click="addOrUpdateHandle($event,record.id)">编辑</el-button>
                      <el-button v-if="permissions.ceping_cepingxmxxb_edit && record.createDeptId === userInfo.deptId" type="danger" plain @click="deleteHandle($event,record.id)">删除</el-button>
                    </div>
                  </div>
                </div>
              </template>

              <div>
                <el-tree :data="record.sjlist" node-key="id" default-expand-all :expand-on-click-node="false">
                  <div class="custom-tree-node flex justifyContentSpaceBetween" slot-scope="{ data }">
                    <div class="flex alignItemsCenter">
                      <!-- <span>{{data.xh}}</span> -->
                      <span>
                        <span>{{data.zbMc}}</span>
                        <span v-if="data.zbQz != 0">（{{data.zbQz}}%）</span>
                      </span>
                      <span v-if="data.zbQz != 0" style="margin-left:10px">排序号:{{data.zbPx}}</span>
                      <el-popover placement="top-start"  width="380" trigger="hover">
                        <div class="font18">
                          {{data.zbMc}}
                        </div>
                        <div class="font16" style="white-space: pre-line" v-html="decodeURIComponent( decodeURIComponent(data.tsNr)) ">
                        </div>
                        <el-button slot="reference" type="text" @click="getDataList()" icon="el-icon-warning" v-if="data.zbQz != 0" style="margin-left:10px">提示内容</el-button>
                      </el-popover>
                    </div>
                    <div>
                      <el-button v-if="data.zbQz == 0 && permissions.ceping_cepingxmxxb_add && data.zbDj < 3 && record.createDeptId === userInfo.deptId" type="primary" plain @click="() => addOrUpdateHandlexjxz(data,record)">新增下一级</el-button>
                      <el-button v-if="permissions.ceping_cepingxmxxb_edit && record.createDeptId === userInfo.deptId" type="primary" plain @click="() => addOrUpdateHandlexj(data,record.xmName)">编辑</el-button>
                      <el-button v-if="permissions.ceping_cepingxmxxb_edit && record.createDeptId === userInfo.deptId" type="danger" plain @click="() => deleteHandlemxb(data.id)">删除</el-button>
                    </div>
                  </div>
                </el-tree>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!-- 父级弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisiblexxb" ref="addOrUpdate" @refreshDataList="zjOperation"></table-form>
      <!-- 子级弹窗, 新增 / 修改 -->
      <xmmxb-form v-if="addOrUpdateVisiblemxb" ref="addOrUpdatemxb" @refreshDataList="getDataList"></xmmxb-form>
      <!-- 主级复用 -->
      <multiplexingForm v-if="addOrVisiblemultiplexing" ref="addOrmultiplexing" @refreshDataList="zjOperation"></multiplexingForm>
    </basic-container>
  </div>
</template>
<style>
.newline{
  white-space:pre-line!important;
}
</style>
<script>
/*!
 * 绩效考核-评分项目管理列表
 *
 * @author zmk
 * @date 2021-06-16 10:11:35
 */
import { fetchList, delObj, updatexmZt } from '@/api/ceping/cepingxmxxb'
import { getXmTree, selzjList, delObjmxb } from '@/api/ceping/cepingxmmxb'
import TableForm from './cepingxmxxb-form'
import XmmxbForm from './cepingxmmxb-form'
import MultiplexingForm from './cepingxmxxbmultiplexing-form'
import { mapGetters,mapState } from 'vuex'

export default {
  data() {
    return {
      dataForm: {
        xmZt: '1',
        xmName: '',
      },
      activeName: '',
      index: '',
      options: [{
        value: '1',
        label: '显示'
      }, {
        value: '0',
        label: '隐藏'
      }],

      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisiblexxb: false,
      addOrUpdateVisiblemxb: false,
      addOrVisiblemultiplexing: false
    }
  },
  components: {
    TableForm,
    XmmxbForm,
    MultiplexingForm
  },
  created() {
    this.getDataList()
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    ...mapGetters(['permissions'])
  },
  methods: {
     displayDecode(text){
       //console.log("1 decode ",decodeURIComponent(text));
       //console.log("2 decode ",decodeURIComponent(decodeURIComponent(text)));
        return decodeURIComponent(text)
    },
    //状态
    Zt(value) {
      return {
        yinCang: value === 0,
        green: value === 1,
      };
    },
    //主级修改增加返回
    zjOperation() {
      this.index = '';
      this.getDataList();
    },
    //项目状态修改
    updatexmZt(e, id, xmzt) {
      e.stopPropagation();

      updatexmZt(id, xmzt).then(data => {
        this.$notify.closeAll();
        this.$notify.success('操作成功');
        this.index = '';
        this.getDataList();
      }).catch(error => {
        this.$notify.success('系统错误');
       //console.log(error);
      });
    },
    //序号获取
    selxh(xh) {
      return (this.pageIndex - 1) * this.pageSize + (xh + 1);
    },
    // 阻止事件传播
    stopProp: function (e) {
      e.stopPropagation()
    },
    //动态获取树结构
    selinformation(index) {
      this.index = index;
      getXmTree(this.dataList[index].id).then(response => {
        this.$set(this.dataList[index], 'sjlist', this.getTree(response.data.data, 0));
      })
    },
    getTree(ary, pid) {
      return ary.filter(v => {
        if (v.pid === pid) {
          if (v.pid === 0) {
            v.xh = 1;
          } else {
            for (var a = 0; a < ary.length; a++) {
              if (ary[a].id == v.pid) {
                v.xh = ary[a].xh + 1;
              }
            }
          }
          return v
        }
      }).map(v => {
        const children = this.getTree(ary, v.id);
        if (children.length) v.children = this.getTree(ary, v.id);
        return v
      });
    },
    // 获取数据列表
    getDataList(page) {
      if (page){
        this.pageIndex = page
      }
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
        if (this.index === '') {
          this.activeName = '';
        } else {
          this.selinformation(this.index);
        }
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 父级 新增 / 修改
    addOrUpdateHandle(e, id) {
      e.stopPropagation()
      this.addOrUpdateVisiblexxb = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 主级复用
    addOrmultiplexing(e, id) {
      e.stopPropagation();
      this.addOrVisiblemultiplexing = true;
      this.$nextTick(() => {
        this.$refs.addOrmultiplexing.init(id);
      })
    },
    // 一级新增
    addOrUpdateHandlemxb(e, data) {
      var formdata = {
        xmId: data.id,
        xmMc: data.xmName,
        pid: 0,
        pMc: "无",
        zbDj: 1,
        zbQz: 0,
        zbPx: 0
      };

      e.stopPropagation();
      this.addOrUpdateVisiblemxb = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatemxb.initFj(formdata);
      })
    },
    // 下级新增
    addOrUpdateHandlexjxz(data, record) {
      var formdata = {
        xmId: record.id,
        xmMc: record.xmName,
        pid: data.id,
        pMc: data.zbMc,
        zbDj: data.zbDj + 1,
        zbQz: 0,
        zbPx: 0
      };

      this.addOrUpdateVisiblemxb = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatemxb.initFj(formdata);
      })
    },
    // 子集编辑
    addOrUpdateHandlexj(data, xmName) {
      this.addOrUpdateVisiblemxb = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatemxb.init(data.id, data.pid, xmName);
      })
    },
    // 删除
    deleteHandle(e, id) {
      var _this = this;
      e.stopPropagation()

      getXmTree(id).then(response => {
        if (response.data.data.length > 0) {
          _this.$notify.closeAll();
          _this.$notify.error('存在下一级无法删除');
        } else {
          _this.$confirm('是否确认删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return delObj(id)
          }).then(data => {
            _this.$notify.closeAll();
            _this.$notify.success('删除成功');
            _this.index = '';
            _this.getDataList();
          })
        }
      })
    },
    // 删除明细
    deleteHandlemxb(id) {
      var _this = this;

      selzjList(id).then(response => {
        if (response.data.data.length > 0) {
          _this.$notify.closeAll();
          _this.$notify.error('存在下一级无法删除');
        } else {
          this.$confirm('是否确认删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return delObjmxb(id)
          }).then(data => {
            _this.$notify.closeAll();
            _this.$notify.success('删除成功');
            _this.getDataList();
          })
        }
      })
    }
  }
}
</script>

<style scoped>
pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break:break-all;
  overflow:hidden;
}
</style>
